<!--
 * @Author: egg1bro
 * @Date: 2023-01-08 14:47:36
 * @LastEditTime: 2023-01-11 13:21:11
 * @LastEditors: egg1bro
 * @Description: 
 * @FilePath: \team-graduation-design\src\views\personInfo\manageAccount.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="page">
        <!-- 导航栏 -->
        <div class="nav">
            <van-nav-bar title="账号管理">
                <template #left>
                    <van-icon name="arrow-left" size="20" color="#3c3c3c" @click="goPersonInfo" />
                </template>
            </van-nav-bar>
        </div>

        <!-- 个人信息页面 -->
        <div class="list1">
            <van-nav-bar @click="goUpdatePhone">
                <template #left>
                    <span class="listname">手机号</span>
                </template>
                <template #right>
                    <span style="color:#d5d5d5">{{ userInfo.user_phone }}</span>
                    <van-icon name="arrow" size="18" color="#d4d4d4" />
                </template>
            </van-nav-bar>

            <van-nav-bar @click="goUpdatePassword">
                <template #left>
                    <span class="listname">修改密码</span>
                </template>
                <template #right>

                    <van-icon name="arrow" size="18" color="#d4d4d4" />
                </template>

            </van-nav-bar>

            <div class="list2">
                <van-nav-bar @click="goAccountCancell">
                    <template #left>
                        <span class="listname">账号注销</span>
                    </template>
                    <template #right>
                        <van-icon name="arrow" size="18" color="#d4d4d4" />
                    </template>
                </van-nav-bar>
            </div>
        </div>
    </div>

</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useLoginStore } from '@/stores/login'
// 实例化路由
const router = useRouter()
// 实例化仓库
const loginStore = useLoginStore()
const { getUserInfo } = loginStore
const { userInfo } = storeToRefs(loginStore)
// 路由跳转
// to 账号注销页面
const goAccountCancell = () => {
    router.push('/accountCancell')
}

// to 修改密码页面
const goUpdatePassword = () => {
    router.push('/updatePassword')
}

// to 更改手机号页面
const goUpdatePhone = () => {
    router.push('/updatePhone')
}

// to 个人信息页面
const goPersonInfo = () => {
    router.push('/personInfo')
}


// 生命周期
onMounted(async () => {
    try {
        await getUserInfo()
        console.log(userInfo.value, 'personInfo');
    } catch (error) {
        return Promise.reject(error)
    }
})


</script>

<style lang="less" scoped>
.page {
    width: 100%;
    height: 100%;
    background-color: #f5f6f8;
    // 此处写fixed才能应用到当前页面公共背景颜色
    position: fixed;
}

.list2 {
    margin-top: 10px;
}
</style>